<template>
	<view class="">
		<button size="default" type="primary" loading>按钮</button>
		<input type="numeric" placeholder="tips" maxlength="10" />
	</view>
	<view class="box" @click="onClick" :style="{ background: color }">
		{{ num }}
	</view>
	<switch checked="true" @change="onChange" />
	<button type="primary" :loading="isLoading">普通按钮</button>
	<view class="">
		<view class="" v-if="shop">京东</view>
		<view class="" v-else>淘宝</view>
		<view class="" v-if="day === 1">星期一</view>
		<view class="" v-else-if="day === 2">星期二</view>
		<view class="" v-else-if="day === 3">星期三</view>
		<view class="" v-else-if="day === 4">星期四</view>
		<view class="" v-else-if="day === 5">星期五</view>
		<view class="" v-else-if="day === 6">星期六</view>
		<view class="" v-else-if="day === 7">星期日</view>
		<view class="" v-else>格式错误</view>

		<view class="box1" v-if="true">
			<image src="../../static/pic1.jpeg" mode=""></image>
		</view>
		<view class="box2" v-show="true">
			<image src="../../static/pic2.jpeg" mode=""></image>
		</view>

		<template v-if="false">
			<view>
				<image src="../../static/logo.png" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view>
				<image src="../../static/pic3.jpeg" mode=""></image>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onShow
	} from "@dcloudio/uni-app";

	const num = ref(1);
	const color = ref("#12f32f");
	const isLoading = ref(false);
	const shop = ref(true);
	const day = ref(1);

	function onClick() {
		num.value++;
		color.value = "#" + String(Math.random()).substring(3, 9);
	}

	function onChange(e) {
		console.log(e.detail.value);
		isLoading.value = !isLoading.value;
	}

	onShow(() => {
		uni.hideTabBarRedDot({
			index: 1,
		});
		console.log(uni.getStorageSync("name"));
	});
</script>

<style lang="scss" scoped>
	.box {
		width: 100px;
		height: 100px;
		background: orange;
	}
</style>